Related Issue

• Closes: Layout Snapping Jitter inside the Scroll Bar Component #474

Description

🧱 The Architectural Context:
Seamless user experiences depend on smooth, gradual transitions. Conditional rendering ({condition && ...}) completely unmounts old DOM nodes and attaches fresh elements on the fly, which can disrupt smooth visual transitions.

❌ The Failure Mechanism:
The original progress bar toggled between two separate element containers based on the state variable isAnimating. The initial loader smoothly scaled across the screen width from 0% to 100% over a fixed 2-second window. The exact millisecond isAnimating flipped to false, that loading element unmounted and the active scroll tracker mounted. If a user had already scrolled halfway down the page during that initial loading phase, the progress bar would instantly snap from 100% back to 50%.

💥 The Impact:
This sudden horizontal shift created a jarring visual jump that made the interface feel unpolished and glitchy.

✅ The Solution:
Unified the layout structure into a single, continuous HTML tracking node. Instead of swapping components out of the DOM entirely, the updated code uses dynamic inline style properties to shift the transition behavior profile from a time-based ease curve over to layout scroll-depth tracking ticks the moment the page finish timer resolves.

How Has This Been Tested?

• Transition Continuity Verification: Tested by mounting the component and scrolling immediately during the loading animation phase. Confirmed that when the 2-second timer ends, the bar smoothly scales into position matching the scroll depth without jumping or flashing.
• Scroll Percentage Tracking: Verified that real-time document height calculation remains perfectly functional and responsive across page scrolls.

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update